<template>
  <div class="modal-delete">
    <el-dialog v-model="modalVisible" title="系统提示" width="500">
      <template #default>
        <div class="content">
          <span>{{ dialogContent }}</span>
        </div>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeModal">取消</el-button>
          <el-button type="primary" color="var(--color-primary)" @click="handleConfirm">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"

const emit = defineEmits<{
  confirm: [value: number[]]
}>()

const modalVisible = ref(false)
const dialogContent = ref("")
// 删除的记录列表
const records = ref<number[]>([])

const handleConfirm = () => {
  emit("confirm", records.value)
}

/**
 * 打开删除弹窗
 *
 * @param ids 删除的记录或记录列表
 * @param description 描述
 */
const openModal = (ids: number | number[], description?: string) => {
  records.value = Array.isArray(ids) ? ids : [ids]

  if (Array.isArray(ids)) {
    // 如果是批量删除
    dialogContent.value = `确认要删除选中的${ids.length}条数据吗?`
  } else {
    dialogContent.value = description || `确认要删除该条数据吗?`
  }

  modalVisible.value = true
}

const closeModal = () => {
  modalVisible.value = false
}

defineExpose({
  openModal,
  closeModal
})
</script>

<style lang="scss" scoped>
:deep(.el-dialog) {
  padding: 16px;

  .el-dialog__header {
    font-size: 18px;
    color: var(--color-black);
    border-bottom: 1px solid #f5f5f5;
  }

  .el-dialog__body {
    padding-bottom: 52px;

    .content {
      padding-top: 20px;
      text-align: center;
      font-size: 16px;
      color: var(--color-black);
    }
  }

  .el-dialog__footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 10px 16px;
  }
}
</style>
